<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>这是主页面</h1>
    <router-view></router-view>
</div>

<script>
    let first = {
        template: `
        <div>
        <h2>这是组件1</h2>
        <button @click="go">跳转到组件2</button>
</div>
        `,
        methods: {
            go() {
                // this.$router.push('/second?id=6')
                this.$router.push('/second/森怕森透')
            }
        }
    }

    let second = {
        template: `
        <div>
        <h2>我是组件2</h2>
        这是组件1传递过来的id：{{$route.query.id}} <br>
        这是组件1传递过来的用户名：{{$route.params.name}}
        </div>
        `
    }

    let myRouter = new VueRouter({
        routes: [
            {path: '/first', component: first},
            {path: '/second/:name', component: second},
            {path: '/', redirect: '/first'},
        ]
    })

    new Vue({
        el: '#app',
        data: {},
        router: myRouter
    })
</script>
</body>
</html>